<script setup lang="ts">

</script>

<template>
<div class="box">
  <div class="n-loading__container--animation-circle--large">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="4.8"></circle>
    </svg>
  </div>
</div>
</template>

<style scoped lang="scss">
.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes loading-dash{
  0%{stroke-dasharray:1,200;stroke-dashoffset:0}
  50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}
  100%{stroke-dasharray:90,150;stroke-dashoffset:-120px}
}
.n-loading__container--animation-circle--large .path {
  stroke: rgb(23, 140, 166);
  stroke-dasharray: 90,150;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: loading-dash 1.5s ease-in-out infinite;
}
@keyframes loading-rotate{
  100%{transform:rotate(360deg)}
}
.n-loading__container--animation-circle--large .circular {
  display: inline;
  width: 27.2px;
  height: 27.2px;
  animation: loading-rotate 2s linear infinite;
}
</style>